<template>
  <div class="company-detail">
    <div class="company-detail__select">
      <div class="company-detail__select-city">
        <el-select v-model="city" size="mini" @change="getData">
          <el-option
            v-for="(item, i) in cityList"
            :key="i"
            :label="item"
            :value="item"
            >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="company-detail__chart">
      <ve-line :data="chartData" :settings="chartSettings" :extend="chartExtend" width="95%" height="10rem"></ve-line>
      <ve-line :data="chartData2" :settings="chartSettings" :extend="chartExtend2" width="95%" height="10rem"></ve-line>
    </div>
    <div class="company-detail__content">
      <el-table
        :data="tableData"
        style="width: 100%;"
        height="11rem"
        border
        size="mini">
        <el-table-column
          prop="zoneName"
          label=""
          align="center" class-name="name">
        </el-table-column>
        <el-table-column
          prop="f1"
          label="贯标项目"
          align="center">
          <template slot-scope="scope">
            <img v-if="scope.row.f1 === 1" src="~images/gou.png" class="gou">
          </template>
        </el-table-column>
        <el-table-column
          prop="f2"
          label="对标项目"
          align="center">
          <template slot-scope="scope">
            <img v-if="scope.row.f2 === 1" src="~images/gou.png" class="gou">
          </template>
        </el-table-column>
        <el-table-column
          prop="f3"
          label="区优项目"
          align="center">
          <template slot-scope="scope">
            <img v-if="scope.row.f3 === 1" src="~images/gou.png" class="gou">
          </template>
        </el-table-column>
        <el-table-column
          prop="f4"
          label="市优项目"
          align="center">
          <template slot-scope="scope">
            <img v-if="scope.row.f4 === 1" src="~images/gou.png" class="gou">
          </template>
        </el-table-column>
        <el-table-column
          prop="f5"
          label="省优项目"
          align="center">
          <template slot-scope="scope">
            <img v-if="scope.row.f5 === 1" src="~images/gou.png" class="gou">
          </template>
        </el-table-column>
        <el-table-column
          prop="f6"
          label="国优项目"
          align="center">
          <template slot-scope="scope">
            <img v-if="scope.row.f6 === 1" src="~images/gou.png" class="gou">
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import { getGlmjRound, getZonePjInfo } from 'src/api/api'
import { formatFontSize } from 'js/utils'
import { Select, Option, Table, TableColumn} from 'element-ui'
import Line from 'v-charts/lib/line.common'
import storage from 'good-storage'
export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Table.name]: Table,    
    [TableColumn.name]: TableColumn,
    [Line.name]: Line,
  },
  data() {
    return {
      cityList: storage.get('cityList'),
      city: '杭州',
      chartSettings: {
        labelMap: {
          'glmj': '管理面积',
          'zgxms': '在管项目数',
        },
      },
      chartExtend: {
        tooltip: {
          show: false,
        },
        legend: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 10,
          },
          left: 40,
          top: 0,
          itemWidth: 15,
          itemHeight: 8,
        },
        xAxis: {
          axisLabel: {
            color: '#8EC7DC',
            fontSize: formatFontSize(0.12),
          },
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          // max: 25000,
          splitNumber: 5,
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '25%',
          bottom: '5%',  
        },
        series: {
          barWidth: 25,
          label: { 
            show: true, 
            position: 'top',
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          itemStyle: {
            color: '#0A8CFF'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: 'rgba(10,140,255,0.7)'},
                  {offset: 1, color: 'rgba(10,140,255,0.1)'}
              ]
            ),
            shadowColor: 'rgba(10,140,255,0.7)',
            shadowBlur: formatFontSize(0.1)
          }
        }
      },
      chartExtend2: {
        legend: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 10,
          },
          left: 40,
          top: 0,
          itemWidth: 15,
          itemHeight: 8,
        },
        tooltip: {
          show: false,
        },
        xAxis: {
          axisLabel: {
            color: '#8EC7DC',
            fontSize: formatFontSize(0.12),
          },
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          // max: 50,
          splitNumber: 5,
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '25%',
          bottom: '5%',  
        },
        series: {
          barWidth: 25,
          label: { 
            show: true, 
            position: 'top',
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          itemStyle: {
            color: '#FFEA00'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: 'rgba(255,234,0,0.7)'},
                  {offset: 1, color: 'rgba(255,234,0,0.1)'}
              ]
            ),
            shadowColor: 'rgba(255,234,0,0.7)',
            shadowBlur: formatFontSize(0.1)
          },
        }
      },
      chartData: {
        columns: ['time', 'glmj'],
        rows: []
      },
      chartData2: {
        columns: ['time', 'zgxms'],
        rows: []
      },
      tableData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const params = {
        city: this.city
      }
      getGlmjRound(params).then(res=> {
        this.chartData.rows = res.data
        this.chartData2.rows = res.data
      })
      getZonePjInfo(params).then(res=> {
        this.tableData = res.data
      })
    }
  },
}
</script>
<style lang="scss">
.company-detail {
  padding: 10px 0px 10px;
  &__select {
    // text-align: right;
    // padding: 5px 20px 5px 0;
    // font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
    margin-bottom: 5px;
    color: #AAECFF;
    .el-select{
      .el-input__inner {
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-city {
      .el-select {
        width: 120px;
      }
    }
    .el-checkbox {
      color: #AAECFF;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #AAECFF;
    }
    .el-checkbox__inner {
      border-radius: 50%;
    }
  }
  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    // height: 150px;
    width: 100%;
    padding-top: 20px;
    
  }
  &__chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: -20px;
  }
  &__content {
    width: 95%;
    margin: 0 auto;
    .gou {
      width: 20px;
      height: 15px;
    }
    .el-table {
      color:#6A97AA;
    }
    .el-table__body-wrapper {
      td {
        color: #39e4d6;
      }
    }
    .name .cell{
      color:#6A97AA;
    }
    .el-table thead {
      color: #fff;
      font-weight: 300;
      // font-size:9px;
    }
    .el-table, .el-table__expanded-cell {
      background-color: transparent;
    }
    .el-table th, .el-table tr {
      background-color: transparent;
    }
    .el-table--border, .el-table--group {
      border: 1px solid #6A97AA;
    }
    .el-table td, .el-table th.is-leaf {
      border-bottom: 1px solid #6A97AA;
    }
    .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
      border-right: 1px solid #6A97AA;
    }
    .el-table--border::after, .el-table--group::after, .el-table::before {
      content: '';
      position: absolute;
      background-color: #6A97AA;
      z-index: 1;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td{
      background-color:transparent !important;
    }

  }
}
</style>